<!--菜单管理-->
<template>
  <div class="menu-com">
    <Row>
      <Col span="5" class="tree-box">
        <Button type="primary" class="btn">
          添加菜单
          <Icon type="md-arrow-dropdown" />
        </Button>
        <Input search placeholder="请输入关键词" v-model="keywords" @on-change="onSearchTree" />
        <Tree :data="treeData"></Tree>
      </Col>
      <Col span="19" class="form-box">
        <h3>编辑菜单</h3>
        <Form ref="formData" :rules="ruleValidate" :model="formData">
          <Row :gutter="30">
            <Col span="12">
              <FormItem label="菜单名称" prop="input">
                <Input v-model="formData.input" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="排序号" prop="input">
                <Input v-model="formData.input" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="对象唯一标识" prop="input">
                <Select v-model="formData.input" placeholder="请选择">
                  <Option :value="it.value" v-for="(it, index) in selectData" :key="index">{{ it.label}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="流程唯一标识" prop="input">
                <Select v-model="formData.input" placeholder="请选择">
                  <Option :value="it.value" v-for="(it, index) in selectData" :key="index">{{ it.label}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="表单唯一标识" prop="input">
                <Select v-model="formData.input" placeholder="请选择">
                  <Option :value="it.value" v-for="(it, index) in selectData" :key="index">{{ it.label}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="APP标识" prop="input">
                <Select v-model="formData.input" placeholder="请选择">
                  <Option :value="it.value" v-for="(it, index) in selectData" :key="index">{{ it.label}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="备注信息" prop="input">
                <Input v-model="formData.input" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="图标设置" prop="input">
                <Select v-model="formData.input" placeholder="请选择">
                  <Option :value="it.value" v-for="(it, index) in selectData" :key="index">{{ it.label}}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>

          <Row type="flex" justify="space-between">
            <Col>
              <BtnPlain type="primary" @click="handleReset('formData')">重置</BtnPlain>
              <BtnPlain type="error">删除菜单</BtnPlain>
            </Col>
            <Col>
              <Button type="primary" @click="handleSubmit('formData')">保存修改</Button>
            </Col>
          </Row>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import { debounce } from 'lodash';

export default {
  name: 'menuPage',
  data () {
    return {
      keywords: '',
      treeData: [
        {
          title: 'parent 1',
          expand: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1'
                },
                {
                  title: 'leaf 1-1-2'
                }
              ]
            },
            {
              title: 'parent 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1'
                },
                {
                  title: 'leaf 1-2-1'
                }
              ]
            }
          ]
        }
      ],
      formData: {
        input: ''
      },
      ruleValidate: {
        input: [
          { required: true, message: 'Please select the city', trigger: 'change' }
        ],
      },
      selectData: [{ value: 1, label: 'New York' }]
    };
  },
  methods: {
    // 左侧树形图搜索框
    onSearchTree: debounce(function () {
      console.log('111', this.keywords);
    }, 500),
    handleReset (name) {
      this.$refs[name].resetFields();
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (!valid) return
        this.$Message.success('Success!');
      })
    },
  },
};
</script>

<style scoped lang="less">
.menu-com {
  margin-top: -16px;
}
.tree-box {
  padding: 20px 20px 0 0;
  border-right: 1px solid #eee;
  .btn {
    margin-bottom: 20px;
  }
}
.form-box {
  padding: 20px 0 0 20px;
}
</style>